import React, {useState} from "react";
import {createStyles} from "antd-style";
import {Outlet} from "react-router";
import HomeHeader, {homeHeaderHeight} from "@/pages/HomePage/HomeHeader.tsx";
import BackgroundRain from "../../components/Background";
import {BreakPoints} from "@/common/profiles.ts";
import useThemeStore from "@/store/ThemeStore.ts";
import SettingDrawer from "@/components/SettingDrawer";

const useStyle = createStyles(({css, token}, props: { transparency: string }) => {
    return {
        container: css`
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            min-height: 100vh;
            max-width: ${BreakPoints.large}px;
            z-index: 1;
            overflow-x: clip;
            transition: background-color .2s;
            background-color: ${token.colorBgContainer + props.transparency};
            margin: auto;
        `,
        content: css`
            margin-top: ${homeHeaderHeight}px;
        `,
    }
})

const HomePage: React.FC = () => {
    const bgTransparency = useThemeStore(state => state.bgTransparency)
    const {styles} = useStyle({transparency: bgTransparency.toString(16)});
    const [showSettingDrawer, setShowSettingDrawer] = useState(false)

    return (
        <>
            <BackgroundRain/>
            <div className={styles.container}>
                <HomeHeader setShowSettingDrawer={setShowSettingDrawer}/>
                <div className={styles.content}>
                    <Outlet/>
                </div>
                <SettingDrawer
                    onClose={() => {
                        setShowSettingDrawer(false);
                    }}
                    open={showSettingDrawer}
                    position={"right"}
                />
            </div>
        </>
    )
}

export default HomePage
